<template>
	<view>
		<u-search :placeholder="placeholder" v-model="keyword" margin="20rpx 24rpx" @change="onChange"></u-search>
		<myTags2 title="历史记录" showIcon :list="historyKeywordList" textKeyName="word" @clickTag="clickTag"></myTags2>
		<myTags2 title="热门搜索" :showIcon="false" :list="hotKeywordList" textKeyName="keyword" isHotKeyName="is_hot"
			@clickTag="clickTag">
		</myTags2>
	</view>
</template>

<script>
	let timer = null // timer要做成全局变量
	import {
		apiSearchIndex
	} from '../../request/api.js'
	import request from '../../request/request.js'
	export default {
		data() {
			return {
				placeholder: '请输入关键字',
				keyword: '',
				historyKeywordList: [],
				hotKeywordList: [],
				list: [{
					is_hot: 0,
					keyword: 123
				}]
			}
		},
		onLoad() {
			request({
				url: apiSearchIndex,
				successCb: res => {
					console.log(res)
					const {
						defaultKeyword,
						historyKeywordList,
						hotKeywordList
					} = res
					this.placeholder = defaultKeyword.keyword
					this.historyKeywordList = historyKeywordList.map(el => {
						return {
							word: el
						}
					})
					this.hotKeywordList = hotKeywordList
				}
			})
		},
		onUnload() {
			// 页面销毁前记得销毁定时器
			clearTimeout(timer)
		},
		methods: {
			clickTag(keyword) {
				console.log(keyword)
			},
			onChange(e) {
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(() => {
					console.log(e)
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-container {
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #fff;

		.top {
			display: flex;
			justify-content: space-between;

			.title {
				margin-bottom: 10rpx;
			}
		}

		/deep/ .u-tag-wrapper {
			display: inline-block;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.u-tag {
				display: inline-block;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
